<template>
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>汽车车型 </h5>
                        <div style="float:right"><a href="/#/model/0/edit">
                            添加
                        </a></div>
                    </div>
                    <div class="ibox-content">

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>品牌</th>
                                <th>主机厂</th>
                                <th>车系</th>
                                <th>操作</th>
                            </tr>
                            <tr>
                                <th>ID</th>
                                <th><input style="width:160px;max-width:96%" type="text" v-model="search.brand_name" /></th>
                                <th><input style="width:160px;max-width:96%" type="text" v-model="search.factory_name" /></th>
                                <th><input style="width:160px;max-width:96%" type="text" v-model="search.name" /></th>
                                <th><a v-on:click='getList()' class="button">
                                    搜索
                                </a></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeA" v-for="item in list">
                                <td>{{item.id}}</td>
                                <td>{{item.brand_name}}</td>
                                <td>{{item.factory_name}}</td>
                                <td>{{item.name}}</td>
                                <td class="center"><a v-bind:href="item.url" class="button">编辑</a></td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>ID</th>
                                <th>品牌</th>
                                <th>主机厂</th>
                                <th>车系</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                        </table>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="dataTables_info" id="DataTables_Table_0_info" role="alert"
                                     aria-live="polite" aria-relevant="all">共 {{total}} 项</div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                                    <ul class="pagination">
                                        <li class="paginate_button previous" aria-controls="DataTables_Table_0" tabindex="0"
                                            id="DataTables_Table_0_previous">
                                            <a v-on:click="getList({page:search.page - 1})">上一页</a>
                                        </li>

                                        <li v-for="item in pages" class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
                                            <a v-on:click="getList({page:item})">{{item}}</a>
                                        </li>
                                        <li class="paginate_button next disabled" aria-controls="DataTables_Table_0"
                                            tabindex="0" id="DataTables_Table_0_next">
                                            <a v-on:click="getList({page:search.page + 1})">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import '../assets/css/plugins/dataTables/dataTables.bootstrap.css'
    import config from '../config'
    export default{
        name : 'model',
        data () {
            return {
                msg: '',
                list:[],
                page_total : 0,
                total : 0,
                pages : [],
//                current_page : 1,
                search:{
                    'page': 1,
                    'brand_name':'',
                    'factory_name':'',
                    'name':'',
                },
                getList : function( params ){
                    this.search = $.extend( this.search, params );
                    this.search.page = this.search.page < 1 ? 1 : this.search.page;
                    this.search.page = this.search.page > this.page_total ? this.page_total : this.search.page;
                    var api_token = localStorage.getItem('api_token');
                    var url = config.api_url + '/backend/models' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: t.search,
                        xhrFields:true,
//                        xhrFields:"'Access-Control-Allow-Origin': '*'",
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ){
                                t.list = [];
                                for(var i =0;i < json.list.length; i ++){
                                    json.list[i].url = '#/model/'+json.list[i].id + '/edit';
                                    t.list.push( json.list[i]);
                                }
                                t.page_total=json.page_total;
                                t.total=json.total;
                                t.pages = [];
                                for( var i = 1;i <= t.page_total; i ++ ){
                                    if( i <= 3 || i>= t.page_total-2 || ( i< t.search.page + 2 && i > t.search.page - 2 ) ){
                                        if( i - t.pages[t.pages.length - 1] > 1 ){
                                            t.pages.push( '...' );
                                        }
                                        t.pages.push( i );
                                    }
                                }
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }

                        }
                    });
                }
            }
        }
        ,created: function(){

            this.getList();
        }

    }
</script>

